<template>
	<view class="car">
		<!-- 空白页 -->
		<view class="title"><text class="tips">【套餐】</text>{{detail.cProductShowName}}</view>
		<view class="container">
			<view class="selected">

				<view class="header">已选商品</view>
				<view class="goods">
					<scroll-view class="left" scroll-x>
						<view class="scoll-wrapper">
							<view class="image-box" v-for="(i,index) in selectData" :key="index">
								<image :src="i.productPicUrl" mode="aspectFill"></image>
								<view class="badege">{{i.number}}</view>
							</view>
						</view>
					</scroll-view>
					<view class="right">
						<text class="minus" @click="changeNumber(0,count)">-</text>
						<text class="num">{{count}}</text>
						<text class="plus" @click="changeNumber(1,count)">+</text>
					</view>
				</view>
			</view>
			<view class="selectList" v-for="l in detail.combinationSales[0].combinationSalesStrategy" :key="l.id">
				<view class="header">
					{{l.strategyItemName}}<text class="small">可选{{l.count}}件</text>
				</view>
				<scroll-view class="floor-list" scroll-x>
					<view class="scoll-wrapper">
						<view class="floor-item" v-for="item in l.combinationsalesItem" :key="item.id">
							<image :src="item.productPicUrl" mode="aspectFill"></image>
							<!-- <text class="new">{{item.lsUpTags[0].tag_name}}</text> -->
							<text class="title clamp">{{item.productName}}</text>
							<text class="price"><text class="unit">￥</text>{{item.price}}</text>
							<view class="number-box">
								<text class="minus" @click="changeNumber(0,item.number,l,item)">-</text>
								<text class="num">{{item.number}}</text>
								<text class="plus" @click="changeNumber(1,item.number,l,item)">+</text>
							</view>
						</view>

					</view>
				</scroll-view>
			</view>

		</view>
		<view class="footer-btn">
			<view class="left" @click="tocar">加入购物车</view>
			<view class="right" @click="toorder">立即购买</view>

		</view>



	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				detail: {
					combinationSales: []
				},
				count: 1,
				selectData: [],
				iSKUId: ''
			};
		},
		computed: {
			// if(this.$SysCache.get('token') == null){
			// 	this.hasLogin = false
			// }else{
			// 	this.hasLogin = true
			// }
		},
		onLoad(options) {
			this.iSKUId = options.skuId
			this.detail = this.$SysCache.get("optionalData")
			this.detail.combinationSales[0].combinationSalesStrategy.forEach(item => {
				item.combinationsalesItem.forEach(str => {
					this.$set(str, "number", 0)
				})
			})
		},
		onShow() {


		},
		mounted() {},

		methods: {
			changeNumber(type, number, parent, child) {
				if (child) {
					let count = 0
					if(child.number>=child.iProductNum&&type == 1){
						uni.showToast({
							title: "当前商品最多可选" + child.iProductNum + "件商品,已选" + number + "件",
							icon: "none"
						})
						return
					}
					
					parent.combinationsalesItem.forEach(str => {
						count += str.number
					})
					console.log(count)
					if (count < parent.count) {
						if (type == 1) {
							child.number++

						} else {
							console.log(count)
							if (child.number > 0 && count != 0) {

								child.number--
							}

						}
					} else {

						console.log(count)
						if (child.number > 0 && type == 0) {

							child.number--
						}
						if (type == 1) {
							uni.showToast({
								title: "最多可选" + parent.count + "件商品,已选" + count + "件",
								icon: "none"
							})
						}


					}
					this.selectData = []
					this.detail.combinationSales[0].combinationSalesStrategy.forEach(item => {

						item.combinationsalesItem.forEach(str => {

							if (str.number > 0) {
								this.selectData.push(str)
							}

						})

					})
				} else {
					if (type == 1) {
						this.count++

					} else {

						if (this.count > 1) {

							this.count--
						}

					}
				}

			},

			toDetail(list, index) {
				console.log("asas", list, index)
				uni.navigateTo({
					url: `/pages/detail/index?id=${list.productId}&iShopId=${list.iShopId}`,
				});
			},
			tocar() {

				for(let i=0;i<this.detail.combinationSales[0].combinationSalesStrategy.length;i++){
					let count = 0
					
					for(let k = 0;k<this.detail.combinationSales[0].combinationSalesStrategy[i].combinationsalesItem.length;k++){
						count += this.detail.combinationSales[0].combinationSalesStrategy[i].combinationsalesItem[k].number
						
						
					}
					if (this.detail.combinationSales[0].combinationSalesStrategy[i].count > count) {
						
						uni.showToast({
							title: this.detail.combinationSales[0].combinationSalesStrategy[i].strategyItemName+"必须选够" + this.detail.combinationSales[0].combinationSalesStrategy[i].count + "件,已选" + count + "件",
							icon: "none"
						})
						return
					}
				}

				
				let datas = []
				this.selectData.forEach(item => {
					let temp = {
						"iSKUId": item.iskuId,
						"iQuantity": item.number,
						"iProductId": item.productId,
						"lPackageId": this.detail.combinationSales[0].id,
						"iPackageNum": this.count,
						"strategyId": item.strategyId,
						"bIsMain": item.bIsMain,
						"iShopId": item.iShopId || '',
						"onLineOffLine": 0,
						"fixedSale": 1,
						"lPackagePId": this.detail.combinationSales[0].mainProductId,
						"lPackageSkuId": this.iSKUId
					}
					datas.push(temp)
				})
				let obj = {
					"items": JSON.stringify(datas)
				}
				console.log(obj)
				this.$Request.post(this.$api.httpApi.goods.addCarts + "&token=" + this.$SysCache.get('token'), obj).then(
					res => {
						if (res.code == 200) {
							uni.showToast({
								title: res.message,
								duration: 2000
							})
							uni.switchTab({
								url: "/pages/car/index"
							})
						}
					})
			},
			toorder(){
				
				for(let i=0;i<this.detail.combinationSales[0].combinationSalesStrategy.length;i++){
					let count = 0
					
					for(let k = 0;k<this.detail.combinationSales[0].combinationSalesStrategy[i].combinationsalesItem.length;k++){
						count += this.detail.combinationSales[0].combinationSalesStrategy[i].combinationsalesItem[k].number
						
						
					}
					if (this.detail.combinationSales[0].combinationSalesStrategy[i].count > count) {
						
						uni.showToast({
							title: this.detail.combinationSales[0].combinationSalesStrategy[i].strategyItemName+"必须选够" + this.detail.combinationSales[0].combinationSalesStrategy[i].count + "件,已选" + count + "件",
							icon: "none"
						})
						return
					}
				}
				let packageDetail = []
				this.selectData.forEach(item=>{
					let temp = {
						iProductId: item.productId,
						iProductNum: item.number,
						iQuantity: item.number,
						iSKUId: item.iskuId,
						iShopId: item.iShopId || '',
						lPackagePId: this.detail.combinationSales[0].mainProductId,
						lPackageSkuId: this.iSKUId,
						productId: item.productId,
						strategyId: item.strategyId
					}
					packageDetail.push(temp)
				})
				let datas = {
					"iSKUId": this.iSKUId,
					"iProductId": this.detail.id,
					"onLineOffLine": 0,
					"iQuantity": this.count,
					"iShopId": this.detail.iShopId || null,
					bIsMain: true,
					fixedSale: 1,
					iPackageNum: this.count,
					lPackageId: this.detail.combinationSales[0].id,
					saleType: this.detail.combinationSales[0].saleType,
					packageDetail:packageDetail
				}
				
				
				let obj = {
					"item": datas
				}
				
				this.$Request.post(this.$api.httpApi.goods.orderNow + "&token=" + this.$SysCache.get('token'), obj).then(
					res => {
						if (res.code == 200) {
							let cardata = [{
								"iSKUId": this.iSKUId,
								"iProductId": this.detail.id,
								"onLineOffLine": 0,
								"iQuantity": this.count,
								"id": res.data
							}]
							let subdata = {
								"items": cardata,
								"realProductAttribute": 1,
								"wayOfOrder": 1
							}
							this.$Request.post(this.$api.httpApi.car.GenerateOrderByShoppingCart + "&token=" + this
								.$SysCache.get('token'),
								subdata).then(resq => {
								if (resq.code == 200) {
									uni.navigateTo({
										url: `/pages/order/order`
									})
				
								}
							})
				
						}
					})
			}

		}

	};
</script>

<style lang="scss">
	page {
		background: #f5f5f5;
	}

	.car {
		margin: 10upx 20upx;

		.title {
			font-size: 32upx;
			line-height: 48upx;

			.tips {
				color: #FF473A;
				margin-right: 10upx;
			}
		}

		.container {
			// padding-bottom: 184upx;
			padding: 0 0 184upx;

			.selected {
				width: 100%;
				display: flex;
				flex-direction: column;

				.header {
					color: #999;
					font-size: 24upx;
					line-height: 32upx;
					margin-top: 24upx;
					margin-bottom: 0;
				}

				.goods {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 20upx;

					.left {
						max-width: 75%;
						display: flex;
						align-items: center;

						.scoll-wrapper {
							display: flex;
						}

						.image-box {
							width: 100upx;
							height: 140upx;
							position: relative;
							margin-right: 30upx;
							padding-top: 40upx;

							image {
								width: 100upx;
								height: 100upx;
							}

							.badege {
								width: 40upx;
								height: 40upx;
								background: #ff5735;
								box-shadow: 0 4upx 16upx 0 rgba(255, 87, 53, 50%);
								display: flex;
								justify-content: center;
								align-items: center;
								color: #fff;
								padding: 0 6upx;
								line-height: 40upx;
								position: absolute;
								top: 20upx;
								right: -20upx;
								border-radius: 50%;

							}
						}
					}

					.right {
						width: 25%;
						display: flex;
						justify-content: flex-end;
						align-items: center;

						.minus {
							border: 1upx solid #ff5735;
							border-radius: 50%;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 40upx;
							color: #ff5735;
							width: 40upx;
							height: 40upx;
							margin-right: 20upx;
						}

						.plus {
							border: 1upx solid #ff5735;
							border-radius: 50%;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 40upx;
							color: #ff5735;
							width: 40upx;
							height: 40upx;
							margin-left: 20upx;
						}

						.number {}
					}
				}
			}

			.selectList {
				margin-top: 20upx;

				.header {
					color: #999;
					font-size: 24upx;
					line-height: 32upx;
					margin-top: 24upx;
					margin-bottom: 20upx;
					display: flex;
					justify-content: flex-start;
					align-items: baseline;

					.small {
						font-size: 16upx;
						margin-left: 10upx;
					}
				}

				.floor-list {
					white-space: nowrap;
				}

				.scoll-wrapper {
					display: flex;
					align-items: flex-start;
				}

				.floor-item {
					margin-right: 26upx;
					font-size: $font-sm+2upx;
					color: $font-color-dark;
					width: 200upx;
					line-height: 1.8;
					border-radius: 6upx;
					position: relative;

					image {
						height: 200upx;
						width: 200upx;
						background: rgba(255, 255, 255, 1);
						box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.08);

					}

					.title {
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(68, 68, 68, 1);
						font-size: 23upx;
					}

					.price {
						font-size: 26upx;
						font-family: Adobe Heiti Std;
						font-weight: normal;
						color: rgba(240, 64, 111, 1);
					}

					.new {
						position: absolute;
						top: 0;
						left: 0;
						width: 98upx;
						height: 32upx;
						background: rgba(77, 200, 151, 1);
						font-size: 17upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(255, 255, 255, 1);
						text-align: center;
						line-height: 32upx;
					}

					.number-box {
						width: 100%;
						display: flex;
						justify-content: center;
						align-items: center;

						// margin: 0 auto;
						.minus {
							border: 1upx solid #ff5735;
							border-radius: 50%;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 40upx;
							color: #ff5735;
							width: 40upx;
							height: 40upx;
							margin-right: 20upx;
						}

						.plus {
							border: 1upx solid #ff5735;
							border-radius: 50%;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 40upx;
							color: #ff5735;
							width: 40upx;
							height: 40upx;
							margin-left: 20upx;
						}

					}

				}
			}

		}



		.footer-btn {
			position: fixed;
			/* left: 30upx; */
			color: #fff;
			bottom: 0px;
			z-index: 95;
			display: flex;
			justify-content: space-between;
			align-items: center;
			// width: 100%;
			height: 100upx;

			left: 0;
			right: 0;

			.left {
				width: 50%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				background: linear-gradient(270deg, #FFC50D 0, #FF921A 100%);
				text-align: center;

			}

			.right {
				width: 50%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				background: linear-gradient(270deg, #FF3535 0, #FF7D4A 100%);
			}
		}
	}
</style>
